<template>
  <div class="bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:shadow-lg attraction-card">
    <div class="relative h-48 overflow-hidden">
      <img 
        :src="attraction.image" 
        alt="景点图片" 
        class="w-full h-full object-cover"
      >
    </div>
    <div class="p-4">
      <h3 class="text-lg font-bold mb-2">{{ attraction.name }}</h3>
      <div class="flex items-center text-yellow-400 mb-3">
        <i class="fa fa-star"></i>
        <span class="ml-1 text-gray-700 font-medium">{{ attraction.rating }}</span>
      </div>
      <button class="w-full bg-primary/10 hover:bg-primary/20 text-primary py-2 rounded-lg transition-colors">
        查看详情
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    attraction: {
      type: Object,
      required: true
    }
  }
};
</script>
